<template>
  <div>
    <!-- 新增一级菜单按钮 -->
    <div>
      <el-button
        @click="handleShowAddMenuDialog(0)"
        style="margin-bottom:10px;"
        type="success"
        size="small"
      >
        添加
      </el-button>
    </div>
    <!-- 菜单属性数据表格 -->
    <div>
      <el-table
        :data="menus"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
      >
        <el-table-column prop="title" label="菜单标题" sortable />
        <el-table-column prop="component" label="路由名称" sortable />
        <el-table-column prop="sortValue" label="排序" sortable />
        <el-table-column prop="status" label="状态" sortable>
          <template #default="scope">
            {{ scope.row.status === 1 ? '正常' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable />
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button
              type="success"
              size="small"
              @click="handleShowAddMenuDialog(scope.row.id)"
            >
              添加下级菜单
            </el-button>
            <el-button size="small" @click="handleShowEditDialog(scope.row)">
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增/更新 对话框表单 -->
    <div>
      <el-dialog v-model="dialogFormVisible" :title="title">
        <el-form>
          <el-form-item label="菜单标题" :label-width="formLabelWidth">
            <el-input v-model="menu.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="路由名称" :label-width="formLabelWidth">
            <el-input v-model="menu.component" autocomplete="off" />
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input v-model="menu.sortValue" autocomplete="off" />
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-radio-group v-model="menu.status" class="ml-4">
              <el-radio :label="1" size="large">正常</el-radio>
              <el-radio :label="0" size="large">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSaveOrUpdate">
              提交
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {
  GetNestedMenus,
  DeleteMenuById,
  SaveMenu,
  GetMeuById,
  UpdateMenu,
} from '@/api/sysMenu'
import { ElMessage, ElMessageBox } from 'element-plus'
const menus = ref([])
onMounted(() => {
  //页面渲染时 执行加载菜单列表的函数
  initData()
})
const initData = async () => {
  const { data } = await GetNestedMenus()
  menus.value = data
}
//1、删除菜单
const handleDelete = row => {
  ElMessageBox.confirm(`删除菜单【${row.title}】，是否确认?`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    //确认
    .then(async () => {
      await DeleteMenuById(row.id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      //刷新页面数据
      initData()
    })
    //取消
    .catch(action => {
      if (action === 'cancel') {
        //本次是手动取消进入异常处理方法
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      }
      // console.log(action)
    })
}
//2、新增菜单
//对话框属性函数
const dialogFormVisible = ref(false)
const formLabelWidth = '120px'
const title = ref('新增菜单')
const menu = ref({
  status: 1,
})
//2.1 弹出新增菜单对话框函数
const handleShowAddMenuDialog = id => {
  menu.value = {
    status: 1,
  }
  //给要新增的菜单绑定父菜单
  menu.value.parentId = id
  //展示对话框
  title.value = '新增下级节点'
  dialogFormVisible.value = true
}
//2.2 新增对话框提交按钮事件函数
const handleSaveMenu = async () => {
  await SaveMenu(menu.value)
  ElMessage.success('新增成功')
  //刷新数据
  initData()
  //关闭对话框
  dialogFormVisible.value = false
}

const handleSaveOrUpdate = () => {
  if (menu.value.id) {
    //更新
    handleUpdateMenu()
  } else {
    //新增
    handleSaveMenu()
  }
}

//3、修改菜单
//3.1 显示修改菜单的对话框
const handleShowEditDialog = async row => {
  const { data } = await GetMeuById(row.id)
  menu.value = data
  title.value = '修改菜单'
  //弹出对话框
  dialogFormVisible.value = true
}
//3.2 提交修改请求
const handleUpdateMenu = async () => {
  await UpdateMenu(menu.value)
  ElMessage.success('更新成功')
  initData()
  dialogFormVisible.value = false
}
</script>
